<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../作业2/0.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <h1 style="color: aliceblue;">ban</h1>
                <h1 style="color: rgb(187, 177, 43);">yuan</h1>
            </div>
            <div class="col-md-4 offset-md-4">
                <button class="btn">=</button>
                <div class="right">
                    <p class="child" style="color: rgb(187, 177, 43);">HOME</p>
                    <p class="child" style="color: aliceblue;">ABOUT</p>
                    <p class="child" style="color: aliceblue;">SERICES</p>
                    <p class="child" style="color: aliceblue;">BLOG</p>
                    <p class="child" style="color: aliceblue;">CONTACT US</p>
                </div>
            </div>
        </div>
        <div class="row">
            <h4 class="col-md-4 offset-md-4">WE ARE AT BANYUAN</h4>
            <h1 class="col-md-4 offset-md-4">STARTING A NEW JOURMEY!!</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h1>WHAT WE DO</h1>
            <h4>Lorem ipsum dolor sit amet, consectectetur adiposcing elit,sed do eiusmod </h4>
            <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h1>Design And Decelopement</h1>
                    <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqya.</div>
                    <div style="color: rgb(187, 177, 43);">leam more...</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h1>Website Maintenance</h1>
                    <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqya.</div>
                    <div style="color: rgb(187, 177, 43);">leam more...</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h1>Seo Optimization</h1>
                    <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqya.</div>
                    <div style="color: rgb(187, 177, 43);">leam more...</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h1> Digital Marketing</h1>
                    <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqya.</div>
                    <div style="color: rgb(187, 177, 43);">leam more...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="SERICES">
        <div class="SERICES-container">
            <h1>OUR RECENT WORKS</h1>
            <h4>Lorem ipsum dolor sit amet, consectectetur adiposcing elit,sed do eiusmod </h4>
            <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
        </div>
        <div class="SERICES-footer">
            <div class="col-md-4 col-sm-6 col-xs-12" SERICES-img>
                <img src="./img/bjt1.jpg" alt="" class="serices-img">
                <img src="./img/bjt2.jpg" alt="" class="serices-img">
                <img src="./img/bjt3.jpg" alt="" class="serices-img">
                <img src="./img/bjt4.jpg" alt="" class="serices-img">
                <img src="./img/bjt5.jpg" alt="" class="serices-img">
                <img src="./img/bjt6.jpg" alt="" class="serices-img">
            </div>
        </div>
    </div>
    <div class="BLOG">
        <div class="BLOG-container">
            <h1>LATEST FROM OUR BLOG</h1>
            <h4>Lorem ipsum dolor sit amet, consectectetur adiposcing elit,sed do eiusmod </h4>
            <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
        </div>
        <div class="blog-body">
            <div class="blog-left">
                <img src="./img/bjt7.jpg" alt="" class="blog-img">
                <div class="blogbox">
                    <h2>This is Lorem lpsum Heading</h2>
                    <div class="blogchild">
                        Posted in: Legai Advice
                        <img src="./img/消 息 (1).svg" alt="" class="blogleft-img">12
                        <img src="./img/眼睛.svg" alt="" class="blogleft-img">11
                    </div>
                    <div>We cannot expect people to have respect for laws and orders until we teach respect to those we
                        have
                        entrusted to enforce those laws all the time, we always want to help people cordially.</div>
                    <div>read more ➡️</div>
                </div>
            </div>
            <div class="blog-center">
                <img src="./img/bjt8.jpg" alt="" class="blog-img">
                <div class="blogbox">
                    <h2>This is Lorem lpsum Heading</h2>
                    <div class="blogchild">
                        Posted in: Legai Advice
                        <img src="./img/消 息 (1).svg" alt="" class="blogleft-img">12
                        <img src="./img/眼睛.svg" alt="" class="blogleft-img">11
                    </div>
                    <div>We cannot expect people to have respect for laws and orders until we teach respect to those we
                        have
                        entrusted to enforce those laws all the time, we always want to help people cordially.</div>
                    <div>read more ➡️</div>
                </div>
            </div>
            <div class="blog-right">
                <img src="./img/bjt9.jpg" alt="" class="blog-img">
                <div class="blogbox">
                    <h2>This is Lorem lpsum Heading</h2>
                    <div class="blogchild">
                        Posted in: Legai Advice
                        <img src="./img/消 息 (1).svg" alt="" class="blogleft-img">12
                        <img src="./img/眼睛.svg" alt="" class="blogleft-img">11
                    </div>
                    <div>We cannot expect people to have respect for laws and orders until we teach respect to those we
                        have
                        entrusted to enforce those laws all the time, we always want to help people cordially.</div>
                    <div>read more ➡️</div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <div class="CONTACTUS">
        <div class="CONTACTUS-container">
            <h1>KEEP IN TOUCH WITH US</h1>
            <h4>Lorem ipsum dolor sit amet, consectectetur adiposcing elit,sed do eiusmod </h4>
            <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
        </div>

    </div>
    <script>
        let btnEle = document.querySelector('.btn')
        let right = document.querySelector('.header-right')
        //addEventListener监听事件
        btnEle.addEventListener("click", function () {
            const rightClassName = right.getAttribute("class");
            if (rightClassName.indexOf("menu-hover") === -1) {
                right.setAttribute("class", `${rightClassName} menu-hover`);
            } else {
                right.setAttribute("class", rightClassName.replace("menu-hover", ""));
            }
        })

    </script>
</body>

</html>